<template>
    <el-container class="spider-job-list-container" direction="vertical">
        <el-container>
            <HeaderBtnGroup @handleClick="handleHeaderClick" :config="headerConfig">
            </HeaderBtnGroup>
        </el-container>
        <el-container>
            <div style="width:100%;">
                <el-table :data="targets" v-loading="loadingShow">
                    <el-table-column fixed label="序号" type="index" prop="id"></el-table-column>
                    <el-table-column label="条件" prop="source">
                        <template slot-scope="{ row }">
                            <div class="ellipsis" :title="row.source" v-if="checkLength(row.source)">{{
                ellipsisContent(row.source) }} <el-link type="primary" underline>more</el-link>
                            </div>
                            <div class="ellipsis" :title="row.source" v-else>{{ row.source }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="任务" prop="job">
                        <template slot-scope="{ row }">
                            <div class="ellipsis" :title="row.job" v-if="checkLength(row.job)">{{
                ellipsisContent(row.job) }} <el-link type="primary" underline>more</el-link>
                            </div>
                            <div class="ellipsis" :title="row.job" v-else>{{ row.job }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column width="80px" label="状态" prop="status">
                        <template slot-scope="scope">
                            <span>{{ showStatusDesc(scope.row.status) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column width="80px" label="生效" prop="enable">
                        <template slot-scope="scope">
                            <span>{{ scope.row.enable ? "是" : "否" }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="150" fixed="right">
                        <template slot-scope="scope">
                            <el-button size="mini" type="primary" @click="handleEnable(scope.row)">{{ scope.row.enable ?
                "失效" : "生效" }}</el-button>
                            <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-container>
        <el-dialog title="添加任务" :visible.sync="dialogFormVisible" @close="handleDialogClose" width="90%">
            <SpiderSetJob ref="SetJob" :jobObj="form" :usageScope="whereDict.usageScope" @handleActive="handleActive"
                v-if="dialogFormVisible" />
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false" size="mini">取 消</el-button>
                <el-button type="primary" :disabled="active != 2" @click="handleSave('SetJob')" size="mini">确
                    定</el-button>
            </div>
        </el-dialog>
    </el-container>
</template>

<style lang="scss">
.spider-job-list-container {

    .radio-container {
        margin-left: 0px;

        .direction-hor {
            display: inline-block;
            width: 100px;
            margin-bottom: 0px !important;

            .el-form-item__label {
                margin-left: 20px;
                width: auto;
            }

            .el-form-item__content {
                width: auto;
            }
        }
    }

    .el-dialog__body {
        padding-bottom: 0px !important;
        padding-top: 10px !important;
    }
}
</style>

<script>
const { ipcRenderer: ipc } = require('electron')
import { DeepCopy } from "@/utils/Utils"
import { TaskJobDao } from "@/dao/taskJobDao"
import { funcFns } from '@/puppeteer/utils/funtion'
import { HeaderBtnMixin } from "@/mixins/HeaderBtnMixin"
import { CronStatus, UsageScope } from "@/entities/Constant"
// 组件
import SpiderSetJob from "@/views/media/spider/spiderSetJob"
import HeaderBtnGroup from "@/components/Common/HeaderBtnGroup"

export default {
    name: "SpiderJobList",
    mixins: [HeaderBtnMixin],
    props: {
    },
    components: {
        SpiderSetJob,
        HeaderBtnGroup,
    },
    data() {
        return {
            active: 1,
            targets: [],
            maxLength: 150,
            loadingShow: true,
            formLableWidth: "60px",
            form: TaskJobDao.initialForm(),
            rules: {
                name: [{
                    required: true,
                    message: "",
                    trigger: "blur",
                }]
            },
            whereDict: {
                enable: -1,
                status: -1,
                usageScope: UsageScope.Spider
            },
            headerConfig: {
                pageSize: TaskJobDao.pageSize,
                statusBtns: [
                    { status: -1, name: "全部", key: "*" },
                    { status: 1, name: "待执行", key: "status" },
                    { status: 2, name: "执行中", key: "status" },
                    { status: 3, name: "已完成", key: "status" },
                    { status: 0, name: "失效", key: "enable" },
                    { status: 1, name: "生效", key: "enable" },
                ]
            },
        }
    },
    mounted() {
        this.getTargets(this.page)
    },
    methods: {
        getTargets(page) {
            this.loadingShow = true
            TaskJobDao.fetchCount(this.whereDict, page).then((res) => {
                this.loadingShow = false
                this.targets = res.datas
                this.headerConfig.total = res.count
            })
        },
        handleEnable(row) {
            let obj = DeepCopy(row)
            if (obj.enable == 0) {
                obj.enable = 1
            } else {
                obj.enable = 0
            }
            TaskJobDao.save(obj).then(res => this.getTargets(this.page))
        },
        handleDelete(id) {
            TaskJobDao.delete(id).then(res => this.getTargets(this.page))
        },
        handleDialogClose() {
            this.active = 0
            this.form = TaskJobDao.initialForm()
        },
        handleStatusFilter(row) {
            if (row.key == "*") {
                this.whereDict.enable = -1;
                this.whereDict.status = -1;
            } else {
                this.whereDict[row.key] = row.status
            }
            this.getTargets(this.page)
        },
        handleActive(active) {
            console.log("handleActive", active)
            this.active = active
        },
        handleSave(fromName) {
            this.$refs[fromName].handleSave((jobSource) => {
                if (jobSource) {
                    this.dialogFormVisible = false
                    TaskJobDao.save(jobSource).then((id) => {
                        if (id > 0) {
                            this.getTargets(this.page)
                            this.form = TaskJobDao.initialForm()
                            if (jobSource.id <= 0) jobSource.id = id
                            ipc.send("puppeteer", { usageScope: UsageScope.Spider, data: jobSource, raw: 0 })
                        } else {
                            this.$message.error("保存失败")
                        }
                    })
                }
            })
        },
        checkLength(content) {
            if (!content) {
                return false
            }
            if (content.length < this.maxLength) {
                return false
            }
            return true
        },
        ellipsisContent(content) {
            return funcFns.ellipsisContent(content, this.maxLength)
        },
        showStatusDesc(status) {
            let obj = CronStatus.Options().find(obj => obj.id == status)
            return obj ? obj.name : ""
        }
    },
}
</script>